<style type="text/css">
* {margin:0; padding:0;}

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {zoom:1;}
ul,li {list-style:none;}



/*  focus */
#focus {width:100%; height:495px; overflow:hidden; position:relative;}
#focus ul {height:100%; position:absolute;}
#focus ul li {float:left; width:100%; height:495px; overflow:hidden; position:relative; background:#000;}
#focus ul li div {position:absolute; overflow:hidden;}
#focus .btnBg {position:absolute; width:100%; height:20px; left:0; bottom:0; }
#focus .btn {position:absolute; width:985px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:center;}
#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer;display:none;}
#focus .btn span.on {}
#focus .preNext {width:86px; height:86px; position:absolute; top:90px; background:url(../Public/images/sprite.png) no-repeat 0 0; cursor:pointer;}
#focus .pre {left:25px;}
#focus .next {right:25px; background-position:right top;}
</style>

<script type="text/javascript">
$(function() {
	if (window.innerWidth)
	
	var winWidth = window.innerWidth;
	
	else if ((document.body) && (document.body.clientWidth))
	
	var winWidth = document.body.clientWidth;
	
	var w=$('.banner').width();
	var h=w/1920*495;
	var topd=parseInt((h-86)/2);
	$("#focus").width(w);
	$("#focus ul").width(w);
	$("#focus ul li").width(w);
	$("#focus .btnBg").width(w);
	$("#focus").height(h);
	$("#focus ul li").height(h);

	var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
	var len = $("#focus ul li").length; //获取焦点图个数
	var index = 0;
	var picTimer;
	
	//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
	var btn = "<div class='btnBg'></div><div class='btn'>";
	for(var i=0; i < len; i++) {
		btn += "<span></span>";
	}
	btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
	$("#focus").append(btn);
	$("#focus .btnBg").css("opacity",0);

	//为小按钮添加鼠标滑入事件，以显示相应的内容
	$("#focus .btn span").css("opacity",0).mouseenter(function() {
		index = $("#focus .btn span").index(this);
		showPics(index);
	}).eq(0).trigger("mouseenter");

	//上一页、下一页按钮透明度处理
	$("#focus .preNext").css("opacity",0.8).hover(function() {
		$(this).stop(true,false).animate({"opacity":"1"},300);
	},function() {
		$(this).stop(true,false).animate({"opacity":"0.8"},300);
	});

	//上一页按钮
	$("#focus .pre").click(function() {
		index -= 1;
		if(index == -1) {index = len - 1;}
		showPics(index);
	});

	//下一页按钮
	$("#focus .next").click(function() {
		index += 1;
		if(index == len) {index = 0;}
		showPics(index);
	});

	//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
	$("#focus ul").css("width",sWidth * (len));
	
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	$("#focus").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			showPics(index);
			index++;
			if(index == len) {index = 0;}
		},3000); //此4000代表自动播放的间隔，单位：毫秒
	}).trigger("mouseleave");

	$(".preNext").css('top',topd);
	
	//显示图片函数，根据接收的index值显示相应的内容
	function showPics(index) { //普通切换
		var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
		$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
		//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
		$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
	}
});

</script>
    <!--首页banner-->
	<div class="banner">
		<!--<img src="../Public/images/banner.jpg" style="width:100%;height:auto;" />-->
		<div id="focus">
			<ul>
			<Joyeasy:list sql="SELECT * FROM `wode_slide_data` where fid=1 order by listorder asc,id desc limit 0,5" id="r">
				<li><a href="{$r.link}" target="_blank"><img src="{$r.pic}" style="width:100%;height:100%;" /></a></li>
			</Joyeasy:list>
			</ul>
		</div>
		<div class="banner_jinru">
			<div class="banner_jinru_li">
				<Joyeasy:list sql="SELECT * FROM `wode_slide_data` where id=7" id="r">
				<a href="{$r.link}" target="_blank"><img src="{$r.pic}" style="width:112px;height:112px;" /></a>
				</Joyeasy:list>
			</div>
		</div>
	</div>
  <!-- <script src="../Public/js/jquery.jslides.js"></script>-->
    <!--首页banner-->
    <!--首页diyipai-->
	<div class="syyi">
		<div class="syyi_n">
			<div class="syyi_n_z">
				<div class="syyi_n_z_s">
					<span>感知沃德</span>
				</div>
				<div class="syyi_n_z_x">
					<div class="syyi_n_z_x_s">
						<span>关于沃德</span>
						<a href="./index.php?a=index&m=Page&id=11">+更多</a>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<div class="syyi_n_z_x_x">
						<Joyeasy:list sql="SELECT * FROM `wode_category` where parentid=8 and listtype=1 order by listorder asc,id desc limit 0,3" id="r">
						<a href="{$r.url}">
							<div class="syyi_n_z_x_x_n">
								<img src="{$r.image}" width="170" height="184" />
								<div class="syyi_n_z_x_x_n_x">
								
								</div>
								<div class="syyi_n_z_x_x_n_x_n">
								{$r.catname}
								</div>
							</div>
						</a>
						</Joyeasy:list>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div class="syyi_n_y">
				<div class="syyi_n_z_s">
					<span>新闻资讯</span>
				</div>
				<div class="syyi_n_y_x">
					<div class="syyi_n_y_x_s">
						<span>沃德资讯</span>
						<a href="./index.php?a=index&m=Article&id=2">+更多</a>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<div class="syyi_n_y_x_x">
						<Joyeasy:list sql="SELECT * FROM `wode_article` where catid=2 and posid=1 order by createtime desc,id desc limit 0,3" id="r">
						<a href="{$r.url}">
							<div class="syyi_n_y_x_x_n">
								<div class="syyi_n_y_x_x_n_1">
								{$r.title|str_cut=###,66}
								</div>
								<div class="syyi_n_y_x_x_n_2">
								{$r.createtime|toDate=###,'Y-m-d'}
								</div>
							</div>
						</a>
						</Joyeasy:list>
						<div class="clear"></div>
					</div>
					<div class="syyi_n_y_x_s" style="padding-top:5px;">
						<span>行业资讯</span>
						<a href="./index.php?a=index&m=Article&id=3">+更多</a>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<div class="syyi_n_y_x_x">
						<Joyeasy:list sql="SELECT * FROM `wode_article` where catid=3 and posid=1 order by createtime desc,id desc limit 0,3" id="r">
						<a href="{$r.url}">
							<div class="syyi_n_y_x_x_n">
								<div class="syyi_n_y_x_x_n_1">
								{$r.title|str_cut=###,66}
								</div>
								<div class="syyi_n_y_x_x_n_2">
								{$r.createtime|toDate=###,'Y-m-d'}
								</div>
							</div>
						</a>
						</Joyeasy:list>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
    <!--首页diyipai-->
	<script>
	function show_cplb(t){
		$('.syer_n_x').hide();
		$('#cpdakuang'+t).show();
	}
	function show_cpbj(t){
		$('#cpbj'+t).show();
		$('#cpbjz'+t).show();
	}
	function hide_cpbj(t){
		$('#cpbj'+t).hide();
		$('#cpbjz'+t).hide();
	}
	</script>
    <!--首页dierpai-->
	<div class="syer">
		<div class="syer_n">
			<div class="syer_n_s">
				<span>产品中心</span>
			</div>
			<div class="syer_n_z">
				<span>
					<Joyeasy:list sql="SELECT * FROM `wode_category` where parentid=4 order by listorder asc,id desc limit 0,1" id="rcp1">
						<a href="javascript:;" onclick="show_cplb({$rcp1.id})">{$rcp1.catname}</a>
						|
					</Joyeasy:list>
					<Joyeasy:list sql="SELECT * FROM `wode_category` where parentid=4 order by listorder asc,id desc limit 1,1" id="rcp2">
						<a href="javascript:;" onclick="show_cplb({$rcp2.id})">{$rcp2.catname}</a>
						|
					</Joyeasy:list>
					<Joyeasy:list sql="SELECT * FROM `wode_category` where parentid=4 order by listorder asc,id desc limit 2,1" id="rcp3">
						<a href="javascript:;" onclick="show_cplb({$rcp3.id})">{$rcp3.catname}</a>
					</Joyeasy:list>
				</span>
			</div>
			<div class="syer_n_x" id="cpdakuang{$rcp1.id}">
				<Joyeasy:list sql="SELECT * FROM `wode_category` where parentid=$rcp1[id] order by listorder asc,id desc limit 0,1" id="r">
				<a href="{$r.url}" onmouseover="show_cpbj({$r.id})" onmouseout="hide_cpbj({$r.id})">
					<div class="syer_n_x_1">
						<img src="{$r.image}" width="384" height="238" />
						<div class="syer_n_x_h" id="cpbj{$r.id}">
						
						</div>
						<div class="syer_n_x_h_zi" id="cpbjz{$r.id}">
						{$r.description}
						</div>
					</div>
				</a>
				</Joyeasy:list>
				<Joyeasy:list sql="SELECT * FROM `wode_category` where parentid=$rcp1[id] order by listorder asc,id desc limit 1,2" id="r">
				<a href="{$r.url}" style="margin-left:23px;" onmouseover="show_cpbj({$r.id})" onmouseout="hide_cpbj({$r.id})">
					<div class="syer_n_x_1">
						<img src="{$r.image}" width="384" height="238" />
						<div class="syer_n_x_h" id="cpbj{$r.id}">
						
						</div>
						<div class="syer_n_x_h_zi" id="cpbjz{$r.id}">
						{$r.description}
						</div>
					</div>
				</a>
				</Joyeasy:list>
			</div>
			<div class="syer_n_x" id="cpdakuang{$rcp2.id}" style="display:none;">
				<Joyeasy:list sql="SELECT * FROM `wode_category` where parentid=$rcp2[id] order by listorder asc,id desc limit 0,1" id="r">
				<a href="{$r.url}" onmouseover="show_cpbj({$r.id})" onmouseout="hide_cpbj({$r.id})">
					<div class="syer_n_x_1">
						<img src="{$r.image}" width="384" height="238" />
						<div class="syer_n_x_h" id="cpbj{$r.id}">
						
						</div>
						<div class="syer_n_x_h_zi" id="cpbjz{$r.id}">
						{$r.description}
						</div>
					</div>
				</a>
				</Joyeasy:list>
				<Joyeasy:list sql="SELECT * FROM `wode_category` where parentid=$rcp2[id] order by listorder asc,id desc limit 1,2" id="r">
				<a href="{$r.url}" style="margin-left:23px;" onmouseover="show_cpbj({$r.id})" onmouseout="hide_cpbj({$r.id})">
					<div class="syer_n_x_1">
						<img src="{$r.image}" width="384" height="238" />
						<div class="syer_n_x_h" id="cpbj{$r.id}">
						
						</div>
						<div class="syer_n_x_h_zi" id="cpbjz{$r.id}">
						{$r.description}
						</div>
					</div>
				</a>
				</Joyeasy:list>
			</div>
			<div class="syer_n_x" id="cpdakuang{$rcp3.id}" style="display:none;">
				<Joyeasy:list sql="SELECT * FROM `wode_category` where parentid=$rcp3[id] order by listorder asc,id desc limit 0,1" id="r">
				<a href="{$r.url}" onmouseover="show_cpbj({$r.id})" onmouseout="hide_cpbj({$r.id})">
					<div class="syer_n_x_1">
						<img src="{$r.image}" width="384" height="238" />
						<div class="syer_n_x_h" id="cpbj{$r.id}">
						
						</div>
						<div class="syer_n_x_h_zi" id="cpbjz{$r.id}">
						{$r.description}
						</div>
					</div>
				</a>
				</Joyeasy:list>
				<Joyeasy:list sql="SELECT * FROM `wode_category` where parentid=$rcp3[id] order by listorder asc,id desc limit 1,2" id="r">
				<a href="{$r.url}" style="margin-left:23px;" onmouseover="show_cpbj({$r.id})" onmouseout="hide_cpbj({$r.id})">
					<div class="syer_n_x_1">
						<img src="{$r.image}" width="384" height="238" />
						<div class="syer_n_x_h" id="cpbj{$r.id}">
						
						</div>
						<div class="syer_n_x_h_zi" id="cpbjz{$r.id}">
						{$r.description}
						</div>
					</div>
				</a>
				</Joyeasy:list>
			</div>
		</div>
	</div>
    <!--首页dierpai-->
	<script>
	function show_sjiameng(){
		$('#sjiameng').attr('src','../Public/images/sjiamengh.png');
	}
	function hide_sjiameng(){
		$('#sjiameng').attr('src','../Public/images/sjiameng.png');
	}
	function show_syingxiao(){
		$('#syingxiao').attr('src','../Public/images/syingxiaoh.png');
	}
	function hide_syingxiao(){
		$('#syingxiao').attr('src','../Public/images/syingxiao.png');
	}
	function show_sanli(){
		$('#sanli').attr('src','../Public/images/sanlih.png');
	}
	function hide_sanli(){
		$('#sanli').attr('src','../Public/images/sanli.png');
	}
	</script>
    <!--首页disanpai-->
	<div class="sysan">
		<div class="sysan_n">
			<a href="./index.php?a=index&m=Page&id=23" onmouseover="show_sjiameng()" onmouseout="hide_sjiameng()">
				<div class="sysan_n_z">
					<div class="sysan_n_z_s">
						<img src="../Public/images/sjiameng.png" width="278" height="278" id="sjiameng" />
					</div>
					<div class="sysan_n_z_z">
						合作加盟
					</div>
					<div class="sysan_n_z_x">
						携手并进，共创辉煌
					</div>
				</div>
			</a>
			<a href="./index.php?a=index&m=Wangluo&id=41" onmouseover="show_syingxiao()" onmouseout="hide_syingxiao()">
				<div class="sysan_n_z" style="margin-left:140px;">
					<div class="sysan_n_z_s">
						<img src="../Public/images/syingxiao.png" width="278" height="278" id="syingxiao"  />
					</div>
					<div class="sysan_n_z_z">
						营销网络
					</div>
					<div class="sysan_n_z_x">
						遍布全国，有容乃大
					</div>
				</div>
			</a>
			<a href="./index.php?a=index&m=Article&id=26" onmouseover="show_sanli()" onmouseout="hide_sanli()">
				<div class="sysan_n_z" style="margin-left:140px;">
					<div class="sysan_n_z_s">
						<img src="../Public/images/sanli.png" width="278" height="278" id="sanli"  />
					</div>
					<div class="sysan_n_z_z">
						案例展示
					</div>
					<div class="sysan_n_z_x">
						各行各业，精益求精
					</div>
				</div>
			</a>
			<div class="clear"></div>
		</div>
	</div>
    <!--首页disanpai-->
